<template>
  <xn-dialog custom-class="add-org-type-dialog" :title="orgTitle" :visible.sync="selfVisible" @close="closeDialog">
    <el-form ref="orgTypeForm" :model="orgTypeForm" :rules="rules" label-position="top" size="medium">
      <template v-if="orgType === 'parent'">
        <el-form-item label="单位类型" prop="name">
          <el-input
            v-model="orgTypeForm.name"
            autocomplete="off"
            :maxlength="50"
            show-word-limit
            clearable
            placeholder="请输入单位类型名称"></el-input>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="单位类型" prop="id">
          <el-cascader
            v-model="orgTypeForm.id"
            :options="orgList"
            :props="{ checkStrictly: true }"
            clearable></el-cascader>
        </el-form-item>
        <el-form-item label="单位子类型" prop="subName">
          <el-input
            v-model="orgTypeForm.subName"
            autocomplete="off"
            :maxlength="20"
            show-word-limit
            clearable
            placeholder="请输入单位子类型名称"></el-input>
        </el-form-item>
      </template>

      <div class="btn-box">
        <el-button size="small" @click.stop="closeDialog">取消</el-button>
        <el-button size="small" type="primary" @click.stop="onFormSave">保存</el-button>
      </div>
    </el-form>
  </xn-dialog>
</template>
<script>
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'AddOrgType',
  components: { XnDialog },
  emits: ['close', 'submit'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 单位类型 parent-单位类型，children-子单位类型
    orgType: {
      type: String,
      default: 'parent',
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selfVisible: false,
      orgTypeForm: {
        id: '',
        name: '',
        subName: '',
        subId: '',
        type: '',
      },
      rules: {
        name: [{ required: true, message: '请输入单位类型名称', trigger: 'blur' }],
        subName: [{ required: true, message: '请输入单位子类型名称', trigger: 'blur' }],
        id: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
      },
      orgList: [],
    }
  },
  watch: {
    visible(bool) {
      this.selfVisible = bool
    },
    info: {
      handler(obj) {
        if (obj && obj.code) {
          this.orgTypeForm.id = obj.code
          this.orgTypeForm.name = obj.name
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    orgTitle() {
      let title = ''
      if (this.orgType === 'parent') {
        title = this.info.id ? '编辑单位类型' : '添加单位类型'
      } else {
        title = this.info.id ? '编辑单位子类型' : '添加单位子类型'
      }
      return title
    },
  },
  methods: {
    closeDialog() {
      this.$refs.orgTypeForm && this.$refs.orgTypeForm.resetFields()
      this.orgTypeForm.id = ''
      this.orgTypeForm.name = ''
      this.selfVisible = false
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    onFormSave() {
      this.$refs.orgTypeForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.orgTypeForm)
          this.closeDialog()
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.add-org-type-dialog {
  ::v-deep &.el-dialog {
    width: 500px;
    .el-form {
      .el-input,
      .el-select {
        width: 100%;
      }
      .btn-box {
        text-align: right;
        margin-top: 60px;
        border-top: 1px solid #dedede;
        padding-top: 20px;
      }
    }
  }
}
</style>
